<template>
  <div class="grid">
    <div class="grid-body">
      <table border="0" cellpadding="0" cellspacing="0">
        <thead>
          <tr class="grid-hidden-header">
            <th width="60px">图片</th>
            <th width="280px">商品名称</th>
            <th :key="col.name" v-for="col in columns" :width="col.width">{{col.text}}</th>
          </tr>
        </thead>
        <tbody>
          <tr :key="entry.id" v-for="entry in items">
            <td>
              <img
                :src="'https://data.ysmove.com/' + entry.default_image"
                class="img-responsitive"
                style="max-height:48px;max-width:48px"
              >
            </td>
            <td style="position:relative;padding-right:36px">
              <span>{{entry.goods_name}}</span>
              <button class="btn btn-sm btn-secondary-outline btn-cart" @click="onAddToCartClick(entry)">
                <i class="iconfont icon-plus"></i>
              </button>
            </td>
            <td :key="col.name" v-for="col in columns" class="cell-content">
              <a
                v-if="col.cellClick"
                href="javascript:;"
                v-on:click="onItemClick(col, entry)"
              >{{entry[col.name]}}</a>
              <span v-else>{{entry[col.name]}}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="grid-footer">
      <div v-if="pageable != null" class="footer-content">
        <div class="status">共找到记录: {{pageable.totalCount}}</div>
        <div class="pager">
          <a
            v-if="pageable.currentPage > 1"
            href="javascript:;"
            v-on:click="goto(pageable.currentPage - 1)"
          >上一页</a>
          {{pageable.currentPage}} / {{pageable.pageCount}}
          <a
            v-if="pageable.currentPage < pageable.pageCount"
            href="javascript:;"
            v-on:click="goto(pageable.currentPage + 1)"
          >下一页</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ProductList",
  data() {
    return {
      items: [],
      tableWidth: 0,
      headerRow: null,
      pageable: null,
      columns: [
        { text: "品牌", name: "brand", width: '100px'},
        { text: "存量", name: "spec_qty", width: "60px" },
        { text: "单价", name: "price", width: "120px" }
      ]
    };
  },
  props: {
    addToCart : Function,
    customerId : String,
    searchAction : Function
  },
  methods: {
    onAddToCartClick(entry) {
      if(this.addToCart)
        this.addToCart(entry);
    },
    goto(page, keyword) {
      console.log('request page: ', page)
      const customerId = this.customerId;
      this.$order.getProducts(customerId, keyword, page).then(r => {
        const result = r.data;
        if (result.success) {
          this.items = result.data.items;
          this.pageable = result.data._meta;
        }
      });
    },
    getCheckControlId(entry) {
      var key = "0";
      if (entry) key = entry[this.keyName];
      return "chk_" + this.keyName + "_" + key;
    }
  },
  created() {
    this.keyword = '';
  },
  mounted() {
    this.goto(1);

    $('.grid').grid();
    this.searchAction = function(keyword) {
      console.log('searchAction ..');
    }
  }
};
</script>
<style lang="scss">
@import "@/assets/app.scss";

.btn-cart {
  position: absolute;
  right: 4px;
  top: 10px;
  border: 1px solid rgb(0, 90, 158);
  visibility: hidden;
}

.btn-cart > i {
  color: rgb(0, 90, 158);
}

tr:hover .btn-cart,
.btn-cart:hover {
  visibility:visible;
}

.footer-content {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.status {
  flex: 0 120px;
  height: 100%;
  vertical-align: middle;
  padding-left: 15px;
  line-height: 38px;
}

.pager {
  flex: 1;
  height: 100%;
  text-align: right;
  vertical-align: middle;
  padding-right: 15px;
  line-height: 38px;
}

.grid-footer {
  position: absolute;
  height: 38px;
  bottom: 0px;
  width: 100%;
  border-top: 1px solid $borderColor;
}
</style>


